<template>
  <div>
    <ol class="ranklistScore">
      <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onPullRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li
            class="card"
            v-for="(item, index) in listScore"
            :key="item.school_id"
          >
            <!-- 驾校排名 -->
            <div class="ranking">
              <img v-show="index == 0" src="@/assets/icon_baoming/one.png" />
              <img v-show="index == 1" src="@/assets/icon_baoming/two.png" />
              <img v-show="index == 2" src="@/assets/icon_baoming/three.png" />
              <i v-show="index >= 3">{{ index + 1 }}</i>
            </div>

            <!-- 右部卡片内容 -->
            <div class="jxitem">
              <JiaxiaoItem :items="item"></JiaxiaoItem>
            </div>
          </li>
        </van-list>
      </van-pull-refresh>
    </ol>
    <!-- 回顶按钮 -->
    <van-back-top bottom="60px" style="opacity: 0.6" />
  </div>
</template>

<script>
import JiaxiaoItem from "./JiaxiaoItem.vue";
import { ref, reactive } from "vue";
import httpApi from "@/http";
import { showToast } from "vant";
import { useStore } from 'vuex' // 引入useStore 方法



export default {
  setup() {
    const store = useStore()  // 该方法用于返回store 实例
    console.log(store)  // store 实例对象
    let user_lng=reactive(store.state.userLocation[0])
    let user_lat=reactive(store.state.userLocation[1])
    const listScore = reactive([]);
    /* 处理列表的触底加载 */
    const loading = ref(false);
    const finished = ref(false);
    /* 当触底时执行 */
    /* 当组件滚动到底部时，会触发 load 事件并将 loading 自动设置成 true */
    const onLoad = () => {
      /* 获取存储在store的定位信息 */
    let page = Math.floor(listScore.length / 3) + 1;
    let params = { page: page, pagesize: 3,user_lng,user_lat};
    httpApi.schoolApi.schoolScoreSort(params).then((res) => {
        console.log("评分排行", res);
        listScore.push(...res.data.data.result)
        /* 据更新完毕后，将 loading 设置成 false */
        loading.value = false;
        /* 已加载到前端页面上的数据量(listScore数组长度)==驾校数据总量 */
        if (listScore.length >= res.data.data.total) {
          finished.value = true; //没有更多数据了,finished 已完成  true
        }
      });
    };

    /* 下拉刷新 */
    const refreshing=ref(false)
    /* 下拉刷新时会触发 refresh 事件，，操作完成后将 v-model 设置为 false，表示加载完成。 */
    const onPullRefresh=()=>{
        console.log('下拉刷新');
        showToast('刷新成功')
        onLoad()
      refreshing.value=false
      finished.value=false
    }
    

    return {
      refreshing,
      listScore,
      onPullRefresh,
      onLoad,
      user_lng,
      user_lat,
      loading,
      finished,
    };
  },
};
</script>

<style lang="scss" scoped>
.ranklistScore {
  width: 100%;
  padding: 0 10px;
  .card {
    display: flex;
    flex-wrap: nowrap;
    .ranking {
      width: 10%;
      display: flex;
      justify-content: center;
      align-items: center;

      > img {
        height: 30px;
        width: 30px;
      }
      > i {
        font-size: 16px;
      }
    }
    .jxitem {
      width: 90%;
    }
  }
}
</style>
